import { editor, KeyCode, languages } from 'monaco-editor'
import React from 'react'
import Editor from './Editor'
import './inputEditor.css'

interface IInputEditorProps {
    // 默认值
    defaultValue?: string
}

const declare = `
declare const resBody: {
    a: string
    b: {
        c: number
    }
}`

const globalTypeOverride = `
  // 覆盖 Window 接口（清空所有属性）
  interface Window {}

  // 覆盖 Document 接口（清空）
  interface Document {}

  // 覆盖其他可能的全局类型（按需添加）
  interface Navigator {} // 浏览器导航对象
  interface Console {} // 控制台对象
  interface Array<T> {} // 数组（如需保留数组方法可省略）
  interface String {} // 字符串
  interface Number {} // 数字

  // 如果你需要保留某些全局对象，但清空其属性，也可以这样写：
  // declare const window: Window; // 仅声明 window 存在，但类型为空
  // declare const document: Document;
`

const InputEditor: React.FC<IInputEditorProps> = () => {
    const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null)

    // 编辑器挂在完成后
    const handleEditorDidMount = (
        editor: editor.IStandaloneCodeEditor,
        instance: { languages: typeof languages }
    ) => {
        editorRef.current = editor
        // 改一些配置
        editor.updateOptions({
            // 核心单行配置
            lineNumbers: 'off', // 关闭行号
            minimap: { enabled: false }, // 关闭 minimap
            scrollOnMiddleClick: false,
            scrollPredominantAxis: false,
            scrollBeyondLastLine: false, // 禁止滚动到最后一行之外
            overviewRulerLanes: 0, // 关闭右侧概览标尺
            glyphMargin: false, // 关闭左侧图标边距
            folding: false, // 关闭代码折叠
            lineDecorationsWidth: 0, // 关闭行装饰宽度
            lineNumbersMinChars: 0, // 行号最小字符数设为0

            // 样式调整
            padding: { top: 0, bottom: 0 }, // 减少内边距，更接近输入框

            // 行为限制
            readOnly: false, // 可编辑
            autoIndent: 'none', // 关闭自动缩进
            matchBrackets: 'never', // 不匹配括号
            rulers: [], // 关闭标尺线

            // 隐藏滚动条（关键配置）
            scrollbar: {
                vertical: 'hidden', // 隐藏垂直滚动条
                horizontal: 'hidden', // 隐藏水平滚动条
                handleMouseWheel: false, // 禁用鼠标滚轮滚动
            },

            // 禁用多余功能
            contextmenu: false, // 关闭右键菜单
            // quickSuggestions: false, // 关闭快速提示
            // parameterHints: { enabled: false }, // 关闭参数提示
            acceptSuggestionOnCommitCharacter: false,
            // acceptSuggestionOnEnter: 'off',
            // quickSuggestions: {
            //     comments: false,
            //     other: true,
            //     strings: false,
            // },
            // suggestOnTriggerCharacters: true,
        })

        // 1. 拦截键盘事件，阻止 Enter 键换行
        editor.onKeyDown((e) => {
            // 阻止 Enter 键（包括普通 Enter 和 Shift+Enter）
            if (e.keyCode === KeyCode.Enter) {
                // e.preventDefault() // 阻止默认换行行为
                // e.stopPropagation()
            }
        })

        // 3. 监听内容变化，确保任何情况下都无换行（兜底处理）
        editor.onDidChangeModelContent(() => {
            const value = editor.getValue()
            // 检查是否包含换行符
            if (value.includes('\n') || value.includes('\r')) {
                // 移除所有换行，只保留单行
                const singleLineValue = value.replace(/[\n\r]/g, '')
                // 更新内容（避免触发死循环，先判断是否需要更新）
                if (singleLineValue !== value) {
                    editor.setValue(singleLineValue)
                    // 光标定位到末尾
                    const model = editor.getModel()
                    if (!model) return
                    const lastCol = model.getLineLength(1)
                    editor.setPosition({
                        lineNumber: 1,
                        column: lastCol + 1,
                    })
                }
            }
        })

        // instance.languages.typescript.javascriptDefaults.addExtraLib(
        //     declare,
        //     'declare.d.ts'
        // )
    }

    return (
        <div className='min-w-[100px]'>
            <Editor
                className=' border border-solid border-gray-300 p-1 rounded'
                height='32px'
                language='javascript'
                onMount={handleEditorDidMount}
                exteraLibs={declare}
            />
        </div>
    )
}

export default InputEditor
